import moment from 'moment';
import React, { useContext } from 'react';
import { ScheduleContext } from '../SchContext';

const RowHead = () => (
  <th key="head" title="车辆信息" className="table-cell">
    <div className="table-cell-inner">车辆信息</div>
  </th>
);

const SchTHead = () => {
  const ctx = useContext(ScheduleContext);
  // console.log('ctx===========',ctx);
  const labelFormat = {
    DAY: 'HH:mm',
    WEEK: 'ddd MM/DD',
    MONTH: 'MM/DD',
  };
  const updatedCellWidth = ctx.dateUnit === 'DAY' ? (ctx.cellWidth - 1) * 2 : ctx.cellWidth - 1;
  const cells = ctx.timeRange
    .filter((_, index) => (ctx.dateUnit === 'DAY' ? !(index % 2) : true))
    .map((time, tindex) => (
      <th
        key={+moment(time)}
        colSpan={ctx.dateUnit === 'DAY' ? 2 : 1}
        title={moment(time).toString()}
        className="table-cell"
      >
        <div
          className="table-cell-inner"
          style={{ width: updatedCellWidth, maxWidth: updatedCellWidth }}
        >
          {moment(time).format(labelFormat[ctx.dateUnit])}
        </div>
      </th>
    ));
  return (
    <thead>
      <tr>
        <RowHead />
        {cells}
      </tr>
    </thead>
  );
};

export default SchTHead;
